<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Seabird</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link href="style/css/bootstrap.css" rel="stylesheet">
<link href="style/css/settings.css" rel="stylesheet">
<link href="style/js/google-code-prettify/prettify.css" rel="stylesheet">
<link href="style/js/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" media="all" />
<link href="style/js/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.2" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet">
<link href="style/css/color/green.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href="style/type/fontello.css" rel="stylesheet">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="style/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header>
  <div class="logo pull-left"> <a href="index.html"><img src="style/images/logo.png" alt="" /></a> </div>
  <ul class="contact-info pull-right">
    <li><i class="icon-mail"></i><a href="mailto:#">first.last@email.com</a></li>
    <li><i class="icon-phone-1"></i>+00 (123) 456 78 90</li>
  </ul>
</header>
<!-- /header -->
<div class="body-wrapper">
  <nav id="menu" class="menu">
    <ul id="tiny">
      <li><a href="index.html"><i class="icon-home icn"></i>Home</a>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="index2.html">Home II</a></li>
          <li><a href="index3.html">Home III</a></li>
          <li><a href="index4.html">Home IV</a></li>
        </ul>
      </li>
      <li><a href="portfolio.html"><i class="icon-magic icn"></i>Portfolio</a>
        <ul>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="portfolio-post.html">Post with Slider</a></li>
          <li><a href="portfolio-post2.html">Post with Images</a></li>
          <li><a href="portfolio-post3.html">Post with Video</a></li>
        </ul>
      </li>
      <li><a href="about.html"><i class="icon-docs-1 icn"></i>Pages</a>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="page-with-sidebar.html">Page with Sidebar</a></li>
        </ul>
      </li>
      <li><a href="blog.html"><i class="icon-pencil icn"></i>Blog</a>
        <ul>
          <li><a href="blog.html">Grid Blog with Sidebar</a></li>
          <li><a href="blog2.html">Grid Blog without Sidebar</a></li>
          <li><a href="blog3.html">Blog Medium</a></li>
          <li><a href="blog4.html">Blog Large</a></li>
          <li><a href="blog-post.html">Blog Post</a></li>
        </ul>
      </li>
      <li class="active"><a href="elements.html"><i class="icon-cog-alt icn"></i>Features</a>
        <ul>
          <li><a href="elements.html">Elements</a></li>
          <li><a href="pricing-table.html">Pricing Table</a></li>
          <li><a href="retina-icons.html">Retina Icons</a></li>
        </ul>
      </li>
      <li><a href="contact.html"><i class="icon-mail icn"></i>Contact</a></li>
    </ul>
  </nav>
  <!-- /.menu -->
  
  <div class="box box-border pull-right">
    <div class="light-wrapper">
      <div class="container inner">
        <div class="page-header">
          <h1 class="page-title">Pricing Table</h1>
        </div>
        <!-- /.page-header --> 
        <h3 class="section-title">3 Columns</h3>
        <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
        <div class="divide20"></div>
        <div class="pricing row-fluid">
          <div class="plan span4">
            <h3>Bronze</h3>
            <h4><span class="amount"><span>$</span>3</span></h4>
            <div class="features">
              <ul>
                <li>3 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
            </div>
            <div class="select">
              <div> <a href="#" class="btn inverse">Select Plan</a> </div>
            </div>
          </div>
          <!-- /.span4  -->
          <div class="plan span4">
            <h3> <span class="featured f1"></span> Silver </h3>
            <h4><span class="amount"><span>$</span>10</span></h4>
            <div class="features">
              <ul>
                <li>7 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
              <div class="select">
                <div> <a href="#" class="btn inverse">Select Plan</a> </div>
              </div>
            </div>
          </div>
          <!-- /.span4  -->
          <div class="plan span4">
            <h3>Gold</h3>
            <h4><span class="amount"><span>$</span>20</span></h4>
            <div class="features">
              <ul>
                <li>30 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
              <div class="select">
                <div> <a href="#" class="btn inverse">Select Plan</a> </div>
              </div>
            </div>
          </div>
          <!-- /.span4  --> 
        </div>
        <!-- /.pricing  -->
        <div class="divide20"></div>
        <hr class="arrow"/>
        <h3 class="section-title">4 Columns</h3>
        <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <div class="divide20"></div>
        <div class="pricing row-fluid">
          <div class="plan span3">
            <h3>Bronze</h3>
            <h4><span class="amount"><span>$</span>3</span></h4>
            <div class="features">
              <ul>
                <li>3 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
            </div>
            <div class="select">
              <div> <a href="#" class="btn inverse">Select Plan</a> </div>
            </div>
          </div>
          <!-- /.span3  -->
          <div class="plan span3">
            <h3> <span class="featured f1"></span> Silver </h3>
            <h4><span class="amount"><span>$</span>10</span></h4>
            <div class="features">
              <ul>
                <li>7 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
              <div class="select">
                <div> <a href="#" class="btn inverse">Select Plan</a> </div>
              </div>
            </div>
          </div>
          <!-- /.span3  -->
          <div class="plan span3">
            <h3>Gold</h3>
            <h4><span class="amount"><span>$</span>20</span></h4>
            <div class="features">
              <ul>
                <li>30 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
              <div class="select">
                <div> <a href="#" class="btn inverse">Select Plan</a> </div>
              </div>
            </div>
          </div>
          <!-- /.span3  -->
          <div class="plan span3">
            <h3>Platinium</h3>
            <h4><span class="amount"><span>$</span>30</span></h4>
            <div class="features">
              <ul>
                <li>120 Days</li>
                <li>2GB Storage</li>
                <li>25 Users</li>
                <li>Unlimited Pages</li>
                <li>Enhanced Security</li>
              </ul>
              <div class="select">
                <div> <a href="#" class="btn inverse">Select Plan</a> </div>
              </div>
            </div>
          </div>
          <!-- /.span3  --> 
        </div>
        <!-- /.pricing  --> 
        
      </div>
      <!--/.container--> 
    </div>
    <!--/.light-wrapper-->
    
    <footer class="black-wrapper">
      <div class="container inner">
        <div class="row">
          <section class="span4 widget">
            <h3 class="section-title widget-title">Popular Posts</h3>
            <ul class="post-list">
              <li>
                <h6><a href="blog-post.html">Vivamus sagittis lacus vel augue metus</a></h6>
                <em>3th Oct 2012</em> </li>
              <li>
                <h6><a href="blog-post.html">Scelerisque nisl consectetur et</a></h6>
                <em>28th Sep 2012</em> </li>
              <li>
                <h6><a href="blog-post.html">Pellentesque ornare sem lacinia quam</a></h6>
                <em>15th Aug 2012</em> </li>
            </ul>
            <!-- /.post-list --> 
          </section>
          <!-- /.widget -->
          <section class="span4 widget">
            <h3 class="section-title widget-title">Tags</h3>
            <div class="tagcloud"> <a href="#" style="font-size: 9pt;">blogroll</a> <a href="#" style="font-size: 19pt;">daily</a> <a href="#" style="font-size: 9pt;">dialog</a> <a href="#" style="font-size: 9pt;">gallery</a> <a href="#" style="font-size: 10pt;">journal</a> <a href="#" style="font-size: 9pt;">link</a> <a href="#" style="font-size: 12pt;">motion</a> <a href="#" style="font-size: 9pt;">music</a> <a href="#" style="font-size: 20pt;">photo</a> <a href="#" style="font-size: 13pt;">professional</a> <a href="#" style="font-size: 16pt;">quotation</a> <a href="#" style="font-size: 9pt;">show</a> <a href="#" style="font-size: 15pt;">sound</a> <a href="#" style="font-size: 9pt;">tv</a> <a href="#" style="font-size: 9pt;">video</a> <a href="#" style="font-size: 9pt;">gift</a> <a href="#" style="font-size: 19pt;">label</a> <a href="#" style="font-size: 9pt;">christmas</a> <a href="#" style="font-size: 9pt;">holiday</a> <a href="#" style="font-size: 10pt;">fun</a> <a href="#" style="font-size: 9pt;">recipes</a> <a href="#" style="font-size: 12pt;">concert</a> <a href="#" style="font-size: 9pt;">drinks</a> <a href="#" style="font-size: 20pt;">apps</a> <a href="#" style="font-size: 13pt;">iphone</a> <a href="#" style="font-size: 16pt;">ipad</a> <a href="#" style="font-size: 9pt;">develop</a> <a href="#" style="font-size: 15pt;">marketing</a> <a href="#" style="font-size: 9pt;">strategy</a> <a href="#" style="font-size: 13pt;">food</a> <a href="#" style="font-size: 12pt;">typography</a> <a href="#" style="font-size: 9pt;">mobile</a> <a href="#" style="font-size: 15pt;">envato</a> <a href="#" style="font-size: 9pt;">icon</a> <a href="#" style="font-size: 9pt;">coda</a> <a href="#" style="font-size: 20pt;">jquery</a> <a href="#" style="font-size: 9pt;">cms</a> </div>
          </section>
          <!-- /.widget -->
          <section class="span4 widget">
            <h3 class="section-title widget-title">Get In Touch</h3>
            <p>Fusce dapibus, tellus commodo, tortor mauris condimentum utellus fermentum, porta sem malesuada magna. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur.</p>
            <div class="divide10"></div>
            <i class="icon-location contact"></i> Moonshine St. 14/05 Light City, Jupiter <br />
            <i class="icon-phone contact"></i>+00 (123) 456 78 90 <br />
            <i class="icon-mail contact"></i> <a href="first.last@email.com">first.last@email.com</a> </section>
          <!-- /.widget --> 
        </div>
        <!-- /.row --> 
      </div>
      <!-- .container --> 
    </footer>
    <!-- /footer -->
    
    <div class="subfooter">
      <div class="container inner">
        <p class="pull-left">© 2013 Seabird. All rights reserved. Theme by <a href="http://elemisfreebies.com">elemis</a>.</p>
        <ul class="social pull-right">
          <li><a href="#"><i class="icon-s-rss"></i></a></li>
          <li><a href="#"><i class="icon-s-twitter"></i></a></li>
          <li><a href="#"><i class="icon-s-facebook"></i></a></li>
          <li><a href="#"><i class="icon-s-dribbble"></i></a></li>
          <li><a href="#"><i class="icon-s-pinterest"></i></a></li>
        </ul>
      </div>
      <!-- /.container --> 
    </div>
    <!-- /.subfooter --> 
  </div>
  <!--/.box--> 
</div>
<!--/.body-wrapper--> 
<script src="style/js/jquery.js"></script> 
<script src="style/js/bootstrap.min.js"></script> 
<script src="style/js/twitter-bootstrap-hover-dropdown.min.js"></script> 
<script src="style/js/ddsmoothmenu.js"></script> 
<script src="style/js/jquery.themepunch.plugins.min.js"></script> 
<script src="style/js/jquery.themepunch.revolution.min.js"></script> 
<script src="style/js/jquery.themepunch.showbizpro.min.js"></script> 
<script src="style/js/jquery.fancybox.pack.js"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script> 
<script src="style/js/fancybox/helpers/jquery.fancybox-media.js?v=1.0.0"></script> 
<script src="style/js/jquery.meanmenu.2.0.min.js"></script> 
<script src="style/js/jquery.fitvids.js"></script> 
<script src="style/js/jquery.slickforms.js"></script> 
<script src="style/js/jquery.isotope.min.js"></script> 
<script src="style/js/google-code-prettify/prettify.js"></script> 
<script src="style/js/jquery.easytabs.min.js"></script> 
<script src="style/js/jquery.hoverdir.min.js"></script> 
<script src="style/js/scripts.js"></script>
</body>
</html>